/**
 * 引用图片，自动获取图片的 background-size
 * @param  {string} $url [图片的路径]
 */
@mixin bg($url) {
	background-image: url($url);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

// 设置宽高
@mixin size($width, $height:$width){
    width: $width;
    height: $height;
}

/**
 * 文本截断 - text ellipsis
 * @param  {integer} $num [文本截断的行数]
 */
@mixin text-line($num:1) {
	overflow: hidden;
	text-overflow: ellipsis;
	@if $num==1 {
		white-space: nowrap;
	}
	@else {
		display: -webkit-box;
		-webkit-line-clamp: $num;
		-webkit-box-orient: vertical;
	}
}


/*
 inline-block
 * */
$inline-block-alignment: middle !default;
//设置一个默认的对齐方式 
// 提供一个跨浏览器的方法来实现`display:inline-block`

/*
  $legacy-support-for-ie: false !default; 
  label, input { @include inline-block(none); }
 * */

@mixin inline-block($alignment: $inline-block-alignment) {
	display: inline-block;
	@if $alignment and $alignment !=none {
		vertical-align: $alignment;
	}
	@if $legacy-support-for-ie {
		*vertical-align: auto;
		zoom: 1;
		*display: inline;
	}
}

/**
 * 清除浮动
 */
@mixin clearfix() {
	*zoom: 1;
	&::after {
		content: '';
		display: block;
		clear: both;
	}
}

//禁用样式disabled
@mixin disabled($bgColor: #e6e6e6, $textColor:#ababab) {
	background-color: $bgColor !important;
	color: $textColor !important;
	cursor: not-allowed !important;
}

//最小高度min-height
@mixin min-height($height) {
	min-height: $height;
	height: auto !important;
	@if $legacy-support-for-ie {
		_height: $height;
	}
}


/**
 * 隐藏滚动条
 */
@mixin hide-scrollbar() {
	&::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

//跨浏览器的透明度设置
@mixin opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity=$opacity-ie); //IE8
}

//添加前缀 Animations 和 keyframes
@mixin keyframes($animation-name) {
	@-webkit-keyframes $animation-name {
		@content;
	}
	@-moz-keyframes $animation-name {
		@content;
	}
	@-ms-keyframes $animation-name {
		@content;
	}
	@-o-keyframes $animation-name {
		@content;
	}
	@keyframes $animation-name {
		@content;
	}
}

@mixin animation($str) {
	-webkit-animation: #{$str};
	-moz-animation: #{$str};
	-ms-animation: #{$str};
	-o-animation: #{$str};
	animation: #{$str};
}

@mixin transition($args...) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-ms-transition: $args;
	-o-transition: $args;
	transition: $args;
}



@mixin mask ($bgColor:rgba(0, 0, 0, .4), $z-index:100){
	background-color: $bgColo;
	position: fixed;
	z-index: $z-index;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
}


